<html>
<head>
<link href="jSplitTree.css" rel="stylesheet" type="text/css" />
<link href="jCollam.css" rel="stylesheet" type="text/css" />
<script src="jquery.min.js"></script>
<script src="jLines.js"></script>
<script src="jCollam.js"></script>
<script src="jSplitTree.js"></script>
<script>

function anotherTest(target)
{
	var p1=new jCollam.Proposition('final conclusion');
	var p2=new jCollam.Proposition('center conclusion');
	var p3=new jCollam.Proposition('arg 1');
	var p4=new jCollam.Proposition('arg 2',0.2);
	var p5=new jCollam.Proposition('arg 3');
	var p6=new jCollam.Or();
	var p7=new jCollam.Proposition('arg 4');
	var p8=new jCollam.Proposition('arg 5');
	jCollam.connectItems(p2,p1,1);
	jCollam.connectItems(p3,p6,1);
	jCollam.connectItems(p5,p6,1);
	jCollam.connectItems(p6,p2,1);
	jCollam.connectItems(p4,p2,-1);
	jCollam.connectItems(p7,p5.conclusionConns[p6._id],-1);
	//connectItems(p8,p7.conclusionConns[p5.conclusionConns[p6.id].id],1);
	jCollam.draw(target, [p2] );
}
var textObj;
function init()
{
	var str=
"Bruno can be taken for for a walk\n\
	* #1 Bruno is happy and healthy\n\
		+ and\n\
			[0.7] Bruno seems to wag his tail\n\
			Bruno is a dog\n\
			A happy dog is wagging its tail\n\
				-0.2 Sometimes, a dog is wagging its tail in anticipation instead\n\
		- Bruno's boss is not happy now\n\
			<- A dogs happiness is not affected by the emotional state of its boss\n\
		+ Bruno had his health check yesterday and nothing was found\n\
Bruno's boss does not have to worry\n\
	#1\n\
";
	textObj=document.getElementById('text');
	textObj.value=str.replace(/\t/g,"  ");
	update();
}
function update()
{
	var o=$('#test');
	jCollam.clearTarget(o);
	jCollam.draw(o, textObj.value);
	//anotherTest(o);
} 
</script>
</head>
<body onload="init();">
<h1>jCollam - Online Argument Maps</h1>
<h2>Sandbox</h2>
Press the 'update' button to update the visualized tree.<br><br>
<form action="#" onsubmit="return false;">
<b>Input:</b><br><textarea id="text" name="text" cols="120" rows="15"></textarea><br>
<input type="submit" name="upd" value="Update" onclick="update();return false;"></input>
</form>
<b>Output:</b><br><div id="test"></div>
<h2>Manual</h2>
With the jCollam javascript library, you can visualize Argument Maps using the Collam principles.<br>
Usage:<br>
Call <code>jCollam.draw(target_div, text);</code><br>
Where 'text' is one or more tabbed/doubly spaced trees, as shown in the sandbox below.
Tokens:
<ul>
<li>'*' indicates the proposition is a root to be visualized.</li>
<li>'+' (optional) indicates supporting argumentation.</li>
<li>'-' indicates challenging argumentation.</li>
<li>'<+' or '<-' indicates a meta-reason.</li>
<li>A number between zero and one, immediately after the '+' or '-' indicates the probability.</li>
<li>A number between '[' and ']' indicates an internal probability of a proposition.</li>
</ul>
There is also a programmers interface. Shown below is an example Argument Map:<br>
<pre>
{
	var p1=new jCollam.Proposition('final conclusion');
	var p2=new jCollam.Proposition('center conclusion');
	var p3=new jCollam.Proposition('arg 1');
	var p4=new jCollam.Proposition('arg 2',0.2);
	var p5=new jCollam.Proposition('arg 3');
	var p6=new jCollam.Or();
	var p7=new jCollam.Proposition('arg 4');
	var p8=new jCollam.Proposition('arg 5');
	jCollam.connectItems(p2,p1,1);
	jCollam.connectItems(p3,p6,1);
	jCollam.connectItems(p5,p6,1);
	jCollam.connectItems(p6,p2,1);
	jCollam.connectItems(p4,p2,-1);
	jCollam.connectItems(p7,p5.conclusionConns[p6._id],-1);
	jCollam.draw(target, [p2] );
}
</pre>
</body>
</html>